// ----------------第一个轮播图----------
var swiper = new Swiper('.indexBanner .swiper-container', {
    // 小圆点
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    // 左右按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // 无缝滚动
    loop: true,
    // 3D
    // effect: 'cube',
    // grabCursor: true,
    // cubeEffect: {
    //     shadow: true,
    //     slideShadows: true,
    //     shadowOffset: 20,
    //     shadowScale: 0.94,
    // },
    // 自动播放
    // autoplay: true
    autoplay: {
        delay: 3000
    }
});

// --------------倒计时------------
var date = document.querySelector('.time')
function fn(){
        var oDate = new Date() 
        var future = new Date(2020,11,12,0,0,0,0)
        var cha = (future.getTime() - oDate.getTime()) / 1000
        var day = parseInt(cha / 86400)
        var h = parseInt(cha % 86400 / 3600)
        var m = parseInt(cha % 86400 % 3600 / 60)
        var s = parseInt(cha % 60)
        date.innerHTML ='还剩' +  toDou(day)  + '天 ' + '<span class="y">'+ toDou(h) + '</span>' + ':' + '<span class="y">' + toDou(m) + '</span>' + ':' + '<span class="y">' + toDou(s) + '</span>'
        }
    fn()
    setInterval(fn, 1000)
    
    function toDou(n) {
            return n < 10 ? '0' + n : n
    }

// ----------------限时秒杀右面轮播-------
    

// document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
//   e.preventDefault();
//   swiper.prependSlide([
//     '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
//     '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
//   ]);
// });
// document.querySelector('.prepend-slide').addEventListener('click', function (e) {
//   e.preventDefault();
//   swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
// });
// document.querySelector('.append-slide').addEventListener('click', function (e) {
//   e.preventDefault();
//   swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
// });
// document.querySelector('.append-2-slides').addEventListener('click', function (e) {
//   e.preventDefault();
//   swiper.appendSlide([
//     '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
//     '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
//   ]);
// });
    // ----------------热卖推荐--------
    var appendNumber = 8;
    var prependNumber = 1;
    var swiper1 = new Swiper('.hot .swiper-container', {
        slidesPerView: 4,
    //   centeredSlides: true,
        spaceBetween: 15,
        pagination: {
        el: '.swiper-pagination',
        clickable: true,
        },
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
    });


    // --------------懒加载------
//     ;(function($)
// {
// 	$(window).on('scroll resize load', function(e)
// 	{
// 		var notFoundCount = 0, maxNotFound = 2, screenHeight = $(window).height();
// 		$('[data-lazy-src]').each(function()
// 		{
// 			var pos = this.getBoundingClientRect();
// 			if(pos.bottom <= 0) return true; // 如果当前图片在视野上方，继续往下查找
// 			if(pos.top >= screenHeight) return (notFoundCount++) < maxNotFound; // 如果连续超过 maxNotFound 张图片都在视野下方，停止查找，注意只有从上到下的图片布局才能这样判断
// 			var src = this.dataset.lazySrc;
// 			if(!src) return;
// 			if(this.nodeName === 'img') this.src = src;
// 			else this.style.backgroundImage = 'url(' + src + ')';
// 			this.removeAttribute('data-lazy-src');
// 		});
// 	});
// })(jQuery);

//-----------------首页渲染-------------------
// ---------------第二个轮播渲染-------
// let url = window.location.href
// let index = url.indexOf('=')
// let id = url.substring(index + 1);
// console.log(id)

// let oRow = document.querySelector('.flashsaleRight .swiper-wrapper')
// console.log(oRow);
// var arr =[];
// page(localStorage.getItem('start') || 1)
// function page(n) {
//     oRow.innerHTML = ''
//     pAjax({
//         url: '../server/index.php',
//         type: 'get',
//         data: {
//             start: 17,
//             end: 23
//         }
//     }).then(function (res) {
//         arr = JSON.parse(res)
        
//         console.log(arr)

//         arr.forEach(ele => {
//             let str = 
//             `<div class="swiper-slide">
//                  <a href="details.html?id=${ele.id}" target="_blank">
//                      <img src="${ele.imgBig}" alt="" class="loading">
//                          <div class="text">
//                              <p>${ele.introduce}</p>
//                              <h2><e>￥</e>${ele.price}</h2>
//                          </div>
//                  </a>
//              </div>`

                            

//             oRow.innerHTML += str
//         })
//     }).then(function(){
//         var appendNumber = 4;
//         var prependNumber = 1;
//         var swiper2 = new Swiper('.sc2', {
//         slidesPerView: 3,
//         // centeredSlides: true,
//         spaceBetween: 20,
//         pagination: {
//         el: '.swiper-pagination',
//         clickable: true,
//         },
//         navigation: {
//         nextEl: '.swiper-button-next',
//         prevEl: '.swiper-button-prev',
//         },
//     });
//     })
// }

var oRow = document.querySelector('.sc2')
var oRow1 = document.querySelector('.sc4')
var oRow2 = document.querySelector('.gc1')
var oRow3 = document.querySelector('.gc2')
var oRow4 = document.querySelector('.gc3')
// ------------第二个轮播渲染------
pAjax({
    url: '../server/index.php',
    type: 'get',
    data: {}
}).then(function(res) {
    var arr = JSON.parse(res)

    console.log(arr)

    arr.forEach(ele => {
        if (ele.class == '眼镜框') {
            var str = 
            `<div class="swiper-slide">
                            <a href="details.html?id=${ele.id}" target="_blank">
                                <img src="${ele.imgBig}" alt="" class="loading">
                                    <div class="text">
                                        <p>${ele.introduce}</p>
                                        <h2><e>￥</e>${ele.price}</h2>
                                    </div>
                            </a>
                        </div>`

                        oRow.innerHTML += str
        }
    })
}).then(function(){
        var appendNumber = 4;
        var prependNumber = 1;
        var swiper2 = new Swiper('.sc1', {
        slidesPerView: 3,
        // centeredSlides: true,
        spaceBetween: 20,
        pagination: {
        el: '.swiper-pagination',
        clickable: true,
        },
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
    });
})
// ------------第三个轮播渲染-----
pAjax({
    url: '../server/index.php',
    type: 'get',
    data: {}
}).then(function(res) {
    var arr = JSON.parse(res)

    console.log(arr)

    arr.forEach(ele => {
        if (ele.class == '眼镜框') {
            console.log(1);
            var str = 
            `<div class="swiper-slide">
                            <a href="details.html?id=${ele.id}" target="_blank">
                                <img src="${ele.imgBig}" alt="" class="loading">
                                    <div class="text">
                                        <p>${ele.introduce}</p>
                                        <h2><e>￥</e>${ele.price}</h2>
                                    </div>
                            </a>
                        </div>`

                        oRow1.innerHTML += str
        }
    })
}).then(function(){
    var appendNumber = 8;
    var prependNumber = 1;
    var swiper1 = new Swiper('.sc3', {
        slidesPerView: 4,
    //   centeredSlides: true,
        spaceBetween: 15,
        pagination: {
        el: '.swiper-pagination',
        clickable: true,
        },
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
    });
})
// -------------眼镜框渲染-------------
pAjax({
    url: '../server/index.php',
    type: 'get',
    data: {}
}).then(function(res) {
    var arr = JSON.parse(res)

    // console.log(arr)

    arr.forEach(ele => {
        if (ele.class == '眼镜框') {
            let str = `<li class="yGlass">
            <a href="details.html?id=${ele.id}">
                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="" class="loading">
            </a>
            <div class="txt">
                <div class="name">
                    <a href="details.html?id=${ele.id}"  title="OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼镜框 黑色">OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼...</a></div>
                <div class="price"><e>￥</e>${ele.price}</div>
            </div>
        </li>`

            oRow2.innerHTML += str
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        }
    })
})
// ---------------太阳镜渲染------------
pAjax({
    url: '../server/index.php',
    type: 'get',
    data: {}
}).then(function(res) {
    var arr = JSON.parse(res)

    // console.log(arr)

    arr.forEach(ele => {
        if (ele.class == '太阳镜') {
            let str = `<li class="yGlass">
            <a href="details.html?id=${ele.id}">
                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="" class="loading">
            </a>
            <div class="txt">
                <div class="name">
                    <a href="details.html?id=${ele.id}"  title="OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼镜框 黑色">OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼...</a></div>
                <div class="price"><e>￥</e>${ele.price}</div>
            </div>
        </li>`

            oRow3.innerHTML += str
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        }
    })
})
// ---------------眼镜片渲染------------
pAjax({
    url: '../server/index.php',
    type: 'get',
    data: {}
}).then(function(res) {
    var arr = JSON.parse(res)

    // console.log(arr)

    arr.forEach(ele => {
        if (ele.class == '镜片') {
            let str = `<li class="yGlass">
            <a href="details.html?id=${ele.id}">
                <img src="../img/blank.gif" data-echo="${ele.imgBig}" alt="" class="loading">
            </a>
            <div class="txt">
                <div class="name">
                    <a href="details.html?id=${ele.id}"  title="OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼镜框 黑色">OULE 男女同款个性潮流方框眼镜 商务全框防蓝光近视眼...</a></div>
                <div class="price"><e>￥</e>${ele.price}</div>
            </div>
        </li>`

            oRow4.innerHTML += str
            Echo.init({

                offset: 0,
            
                throttle: 500
            
            });
        }
    })
})
// ---------------第三个轮播渲染-------
// let o3 = document.querySelector('.flashsaleRight .swiper-wrapper')
// console.log(o3);
// var arr =[];
// page(localStorage.getItem('start') || 1)
// function page(n) {
//     o3.innerHTML = ''
//     pAjax({
//         url: '../server/index.php',
//         type: 'get',
//         data: {
//             start: s,
//             end: e
//         }
//     }).then(function (res) {
//         arr = JSON.parse(res)
        
//         console.log(arr)

//         arr.forEach(ele => {
//             let str = `
            
//             <div class="swiper-slide">
                            
//                                 <a href="details.html?id=${ele.id}" target="_blank">
//                                     <img src="${ele.img}" alt="" class="loading">
//                                         <div class="text">
//                                             <p>${ele.name}</p>
//                                             <h2><e>￥</e>${ele.price}</h2>
//                                         </div>
//                                 </a>
//                             </div>

//                             `

//         o3.innerHTML += str
//         })
//     }).then(function(){
//         var appendNumber = 4;
//         var prependNumber = 1;
//         var swiper2 = new Swiper('.sc2', {
//         slidesPerView: 3,
//         // centeredSlides: true,
//         spaceBetween: 20,
//         pagination: {
//         el: '.swiper-pagination',
//         clickable: true,
//         },
//         navigation: {
//         nextEl: '.swiper-button-next',
//         prevEl: '.swiper-button-prev',
//         },
//     });
//     })
// }
    
// --------------眼镜框渲染-----------
